<template>
  <div>
    <div>
      <div v-for="item in list" class="ele"
           @click="selectOther(item)" :style="{'width': item.width < 265 ?item.width + 'px' : '265px'}">
        <div style="width: 100%;height: 100%;line-height: 80px;text-align: center;color: #5d6562;">
            <img v-if="item.type === 'pic'" style="width: 100%;" :src="http + item.imgSrc"/>
            <div v-if="item.type === 'text'">{{item.text}}</div>
        </div>
        <div style="position: relative;top:-75px;color: #000000;font-size: 12px;font-weight: 600;">{{item.extend}}</div>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</template>

<script>
import appConst from '../util/appConst'
import PicPicker from './PicturePicker'
export default {
  props: {
    selectOther: {
      type: Function
    }
  },
  data () {
    return {
      http: appConst.BACKEND_DOMAIN,
      list: []
    }
  },
  computed: {
  },
  mounted () {
    this.$http({
      url: this.$http.adornUrl(`/sys/skinelement/temp/list`),
      method: 'get'
    }).then(({data}) => {
      if (data && data.code === 0) {
        this.list = data.list
      }
    })
  },
  methods: {
  },
  components: {
    PicPicker
  }
}
</script>

<style lang="less" scoped>
.ele {
  float: left;
  /*width: 30%;*/
  height: 75px;
  line-height: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 5px 5px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  &:hover {
    border: 2px solid #18ccc0;
    cursor: pointer;
    border-radius: 5px;
  }
}
</style>
